<template>
  <div>
    <el-card>
      <CategorySelect @getCategoryId="getCategoryId" :can="can != 0" />
    </el-card>
    <el-card style="margin: 20px 0">
      <div v-show="can === 0">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addSpu"
          :disabled="!category3Id"
          >添加Spu</el-button
        >
        <!-- spu列表 -->
        <el-table style="width: 100%" border :data="records">
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column prop="spuName" label="Spu名称" width="width">
          </el-table-column>
          <el-table-column prop="description" label="Spu描述" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{ row }">
              <!-- 这里按钮将来用hintButton替换 -->
              <hint-button
                type="success"
                icon="el-icon-plus"
                size="mini"
                title="添加sku"
                @click="addSku(row)"
              ></hint-button>
              <hint-button
                type="warning"
                icon="el-icon-edit"
                size="mini"
                title="修改spu"
                @click="updateSpu(row)"
              ></hint-button>
              <hint-button
                type="info"
                icon="el-icon-info"
                size="mini"
                title="查看当前spu全部sku列表"
                @click="showSkuList(row)"
              ></hint-button>
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @onConfirm="deleteSpu(row)"
              >
                <hint-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  title="删除spu"
                  slot="reference"
                ></hint-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="text-align: center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[3, 5, 10]"
          :page-size="limit"
          layout=" prev, pager, next,jumper, ->,sizes,total"
          :total="total"
        >
        </el-pagination>
      </div>
      <SpuForm v-show="can === 1" ref="spu" @changeCan="changeCan"></SpuForm>
      <SkuForm v-show="can === 2" ref="sku" @changeCans="changeCans"></SkuForm>
    </el-card>
    <el-dialog :title="`${spu.spuName}的sku列表`" :visible.sync="dialogTableVisible" @closed="closed">
      <el-table :data="skuList" border v-loading="loading">
        <el-table-column
          property="skuName"
          label="名称"
          width="width"
        ></el-table-column>
        <el-table-column
          property="price"
          label="价格"
          width="width"
        ></el-table-column>
        <el-table-column
          property="weight"
          label="重量"
          width="width"
        ></el-table-column>
        <el-table-column        
          label="默认图片"
          width="width"
        ><template slot-scope="{row}">
          <img :src="row.skuDefaultImg" style="width:100px;height:100px">
        </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import SpuForm from './SpuForm'
import SkuForm from './SkuForm'
export default {
  name: 'Spu',
  components: { SkuForm, SpuForm },
  data() {
    return {
      category1Id: '',
      category2Id: '',
      category3Id: '',
      // 0代表展示SPU列表数据   1 添加SPU|修改SPU   2 添加SKU
      can: 0,
      //spu列表的数据
      records: [],
      page: 1,
      limit: 3,
      total: 0,
      //sku列表的显示与隐藏
      dialogTableVisible: false,
      //sku列表数据
      skuList:[],
      spu:[],
      //加载效果
      loading:true
    }
  },
  methods: {
    getCategoryId({ getCategoryId, level }) {
      if (level == 1) {
        this.category1Id = getCategoryId
        this.category2Id = ''
        this.category3Id = ''
      } else if (level == 2) {
        this.category2Id = getCategoryId
        this.category3Id = ''
      } else {
        this.category3Id = getCategoryId
        //获取Spu数据
        this.getSpuList()
      }
    },
    //获取Spu列表数据
    async getSpuList() {
      const result = await this.$API.spu.reqSpuList(
        this.page,
        this.limit,
        this.category3Id
      )
      if (result.code == 200) {
        this.total = result.data.total
        this.records = result.data.records
      }
    },
    //每页的条数改变后
    handleSizeChange(limit) {
      this.limit = limit
      this.getSpuList()
    },
    //当前页码改变后
    handleCurrentChange(page) {
      this.page = page
      this.getSpuList()
    },
    // 添加spu按钮的回调
    addSpu() {
      this.can = 1
      //通知子组件SpuForm发请求
      this.$refs.spu.addSpuData(this.category3Id)
    },
    // 修改spu按钮的回调
    updateSpu(row) {
      this.can = 1
      //通过ref获取子组件
      this.$refs.spu.initSpuData(row)
    },
    //切换场景
    changeCan({ can, flag }) {
      this.can = can
      this.getSpuList()
      if (flag == '修改') {
        this.handleCurrentChange(this.page)
      } else {
        this.handleCurrentChange(1)
      }
    },
    // 删除spu
    async deleteSpu(row) {
      let result = await this.$API.spu.reqDeleteSpu(row.id)
      if (result.code == 200) {
        this.$message.success('删除成功')
        this.getSpuList()
        this.handleCurrentChange(
          this.records.length > 1 ? this.page : this.page - 1
        )
      }
    },
    // 添加Sku按钮的回调
    addSku(row) {
      this.can = 2
      this.$refs.sku.initSkuData(this.category1Id, this.category2Id, row)
    },
    // 切换场景
    changeCans(can) {
      this.can = can
    },
    // sku列表展示
    async showSkuList(spu) {
      this.dialogTableVisible = true
      //获取spu
      this.spu=spu
      //获取skuList
      let result = await this.$API.spu.reqSkuList(spu.id);
      if (result.code == 200) {
        this.skuList = result.data
        //结束loading效果
        this.loading=false
      }
    },
    closed(){
      this.loading=true
      this.spu=[]
      this.skuList=[]
    }
  }
}
</script>

<style></style>
